import React, { ReactElement } from 'react';
import { View } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';

import styles from './style';

interface Props {
  percentage: number;
  width: number;
  wrapperStyle?: object;
  progressStyle?: object;
  processColor?: string[];
}

export default function ScheduleLine(props: Props): ReactElement {
  const {
    width,
    wrapperStyle,
    percentage,
    progressStyle,
    processColor = ['#F4ECC7', '#E1D4A2']
  } = props;
  return (
    <View
      style={[
        styles.wrapper,
        {
          width,
          ...wrapperStyle
        }
      ]}
    >
      <LinearGradient
        start={{ x: 0.0, y: 1.0 }}
        end={{ x: 1.0, y: 1.0 }}
        colors={processColor}
        style={[
          styles.line,
          {
            width: (percentage / 100) * width,
            ...progressStyle
          }
        ]}
      />
    </View>
  );
}
